<template>
	<view class="content">
		<!-- <image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view> -->
		<view class="topbar" :style="{height:topHeight+'px',width:'100%'}">
			
		</view>
		<swiper class="swiper test" circular 
		:indicator-dots="indicatorDots"
		indicator-color="#999"
		indicator-active-color="#fff"
		:style="{height:`calc(100vh - ${topHeight}px )`}">
			<swiper-item :style="{height:'100%'}">
				<view class="swiper-item uni-bg-red">
					<TimeItem title="KILLTIME" 
					textColor="rgb(107,190,105)"
					
					>
					<div class="time-child__wrap">
						<RecordItem
						 bgColor="rgb(17,33,20)" 
						 @onlongPress="handleLongPress"/>
						<RecordItem bgColor="rgb(17,33,20)" />
						<RecordItem bgColor="rgb(17,33,20)" />
						<RecordItem bgColor="rgb(17,33,20)" />
						<RecordItem bgColor="rgb(17,33,20)" />
						<RecordItem bgColor="rgb(17,33,20)" />
						<RecordItem bgColor="rgb(17,33,20)" />
					</div>
					</TimeItem>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-green">这是第二屏幕</view>
			</swiper-item>

		</swiper>
	</view>
</template>
<script setup>
	import {
		ref
	} from "vue";
	import {useStore} from "../../store/deviceInfo.js";
	import TimeItem from "../component/timeItem/timeItem.vue"
	import RecordItem from "../component/recordItem/recordItem.vue"
	const deviceInfo = useStore()
	const topHeight = deviceInfo.deviceTopBar
	console.log('测试语法')
	const indicatorDots = ref(true)
	const handleLongPress=()=>{
		console.log('哈哈哈')
	}
</script>
<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100vw;
		background-color: rgb(1, 1, 1);
		height: 100vh;
		color:#fff
		 ;
	}
	.topbar{
		background-color: rgb(1, 1, 1);
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	/* .uni-bg-red{
		color:red
	} */
	.swiper{
		width: 100%;
		
		/* flex: 1 1 auto; */
		/* height: calc(100vh - ); */
		background-color: rgb(1, 1, 1);
	}
	.swiper-item{
		height: 100%;
	}
	.time-child__wrap{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 30rpx 0;
		box-sizing: border-box;
	}
</style>